@keyframes enter {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes leave {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@toast-prefix: ~"@{css-prefix}-toast";

.@{toast-prefix} {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	&__wrapper {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		animation-name: enter;
		animation-duration: 500ms;
		animation-fill-mode: forwards;
	}
	&__content {
		width: 244px;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		border-radius: @border-radius-base;
		background-color: rgba(17, 17, 17, .7);
		text-align: center;
	}
	&__image {
		margin-bottom: 20px;
		width: 80px;
	}
	&__text {
		color: #ffffff;
		font-size: @font-size-base;
		text-align: center;
	}
	&-leave {
		animation-name: leave;
	}
}